<template>
  <div>
    <el-dialog
      v-model="inShow"
      title="附件清单"
    >
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action="/api/storage/uploadbusfile"
        :headers="header"
        :show-file-list="false"
        :data="uploadData"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
        :on-error="onError"
      >
        <el-button type="primary">新增 </el-button>

        <template #tip>
          <div class="el-upload__tip">
            doc / docx / xls / xlsx / rar / zip / 7z / pdf / ppt / ftl / bmp /
            png / jpg / jpeg / gif
          </div>
        </template>
      </el-upload>
      <AppPageTable
        stripe
        :data="data.attachmentList"
        @change="getFileTableData()"
        :option="tableData.option"
        class="table"
      >
        <el-table-column
          prop="originalName"
          label="文件名称"
        ></el-table-column>
        <el-table-column
          prop="size"
          label="文件大小"
        ></el-table-column>
        <el-table-column
          prop="contentType"
          label="文件类型"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="文件日期"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="90"
        >
          <template #default="scope">
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteData(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </AppPageTable>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: {
    AppPageTable,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    detailData: {
      type: Object,
      default: () => {  },
    },
  },
  emits: ["update:show", "update:detailData"],
  computed: {
    inShow: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      tableData: {
        // data: this.detailData.attachmentList,
        option: useTableOption(),
      },
      header: {
        Authorization: localStorage.getItem("jst:token"),
      },
      uploadData: {
        BusId: "",
        FileType: "docWork",
      },
    };
  },
  methods: {
    getTableData() {
      this.$http.post();
    },
    beforeUpload(rawFile) {
      this.tableData.option.loading = true;
      return true;
    },
    onSuccess(response) {
      this.tableData.option.loading = false;
      if (response.status) {
        this.$message.success("上传成功");
        this.getFileTableData();
      } else {
        this.$message.error(response.message);
      }
    },
    onError(error) {
      this.tableData.option.loading = false;
      this.$message.error("错误:" + error.message);
    },
    deleteData(row) {
      // this.tableData.option.loading = true;
      this.$http
        .post("/api/storage/delete", {
          idArray: [row.id],
        })
        .then((res) => {
          if (res.status) {
            // this.data.attachmentList.splice(
            //   this.data.attachmentList.findIndex((t) => t == row),
            //   1
            // );
            this.getFileTableData();
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        })
      // .finally(() => (this.tableData.option.loading = false));
    },
    //获取当前业务详情的附件
    async getFileTableData() {
      this.tableData.option.loading = true;
      let res = await this.$http.get("/api/storage/queryAttachment", {
        BusId: this.data.id,
        PageIndex: this.tableData.option.page,
        PageSize: this.tableData.option.pageSize,
      });
      this.data.attachmentList = res.content;
      this.tableData.option.total = res.totalElements;
      this.tableData.option.loading = false;
    },
  },
  watch: {
    detailData: {
      immediate: true,
      handler(newDetailData) {
        this.uploadData.BusId = newDetailData.id;
      },
    },
  },
  mounted() {
  },
});
</script>

<style lang="scss" scoped>
.table {
  margin-top: 8px;
}
</style>
